<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        color: forestgreen;
    }

    body {
        background-color: #333;
    }

    .box {
        width: 1000px;
        height: 290px;
        margin: 100px auto;

    }

    .box .btn {
        width: 250px;
        height: 290px;
        float: left;
        position: relative;
    }

    .box .btn .icon {
        width: 220px;
        height: 210px;
        display: block;
        transition: 100ms;
        -moz-transition: 100ms;
    }

    .box .btn .icon-miss {
        background: url("mission.png") no-repeat center;
    }

    .box .btn .icon-play {
        background: url("play.png") no-repeat center;
    }

    .box .btn .icon-touch {
        background: url("touch.png") no-repeat center;
    }

    .box .btn .icon:hover {
        transform: rotate(360deg) scale(1.2);
        -moz-transform: rotate(360deg) scale(1.2);
    }

    .box .btn .link {
        display: block;
        width: 180px;
        height: 50px;
        line-height: 46px;
        padding-left: 20px;
        font-size: 20px;
        font-weight: 500;
        border: 2px solid rgba(250, 250, 250, 0.5);
        margin: 0 auto;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        background: url("allow.png") no-repeat 120px center;
        transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        position: relative;
    }

    .btn .link:hover {
        background-position: 140px center;
        border: 2px solid rgba(250, 250, 250, 1);

    }

    .link:hover .line {
        background-color: #fff;
    }

    .link .line {
        position: absolute;
        display: block;
        background: none;
        transition: 0.3s ease;
        -moz-transition: 0.3s ease;

    }

    .link .line-top {
        height: 2px;
        width: 0px;
        top: -2px;
        left: -110%;
    }

    .link:hover .line-top {
        width: 100%;
        left: -2px;

    }

    .link .line-bottom {
        height: 2px;
        width: 0px;
        bottom: -2px;
        right: -110%;
    }

    .link:hover .line-bottom {
        width: 100%;
        right: -2px;

    }

    .link .line-left {
        height: 0px;
        width: 2px;
        left: -2px;
        bottom: -110%;
    }

    .link:hover .line-left {
        height: 100%;
        bottom: -2px;

    }

    .link .line-right {
        height: 0px;
        width: 2px;
        right: -2px;
        top: -110%;
    }

    .link:hover .line-right {
        height: 100%;
        top: -2px;
    }

    .box .dialog {
        position: absolute;
        padding: 0px 14px;
        height: 35px;
        line-height: 35px;
        background: forestgreen;
        color: #fff;
        top: 230px;
        font-size: 16px;
        font-weight: normal;
        text-transform: none;
        margin: 0 auto;
        border-radius: 3px;
        opacity: 0;

    }

    .box .dialog i {
        color: #fff;
        font-style: normal;
    }

    .box .dialog span {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
        left: 50%;
        border: 7px solid transparent;
        border-top-color: forestgreen;
        margin-left: -3px;
        bottom: -14px;
    }


</style>

<script src="../jquery-2.2.1.min.js"></script>

<body>
<div class="box">
    <div class="btn btn-miss">
        <span class="icon icon-miss"></span>
        <a class="link" href="#" data-title="This is A">
            MISSION
            <span class="line line-top"></span>
            <span class="line line-bottom"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
        </a>
    </div>
    <div class="btn btn-play">
        <span class="icon icon-play"></span>
        <a class="link" href="#" data-title="This is B">
            PLAY
            <span class="line line-top"></span>
            <span class="line line-bottom"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
        </a>
    </div>
    <div class="btn btn-touch">
        <span class="icon icon-touch"></span>
        <a class="link" href="#" data-title="This is A-B-C-D-E-F-J-H-I-G-K-L-M">
            TOUCH
            <span class="line line-top"></span>
            <span class="line line-bottom"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
        </a>
    </div>
    <div class="dialog">
        <i></i>
        <span></span>
    </div>
</div>

</body>
<script type="text/javascript">
    $(function () {
        $(".btn .link").hover(function () {
            var info = $(this).attr("data-title");
            $(".dialog i").text(info);
            var dia_pos = $(this).offset().left;
            var c = $(this).outerWidth() - $(".dialog").outerWidth();
            var lefts = dia_pos + c / 2;
            $(".dialog").css({
                left: lefts + "px"

            }).stop().animate({top: 260, opacity: 1}, 300);

        }, function () {
            $(".dialog").stop().animate({top: 230, opacity: 0}, 300);
        });
    });


</script>

</html>